<template>
  <div class="box">

    <el-row :gutter="12">
      <el-col :span="5" class="category-tree">
        <container-nav :treeData="categoryTreeData"
                       :loading="treeLoading"
                       :setLabelId="leftCategoryProp"
                       :defaultExpandAll="true"
                       @handleNodeClick="handleLeftNodeClick"></container-nav>
      </el-col>
      <el-col :span="5" class="center-tree">
        <container-nav :treeData="treeData"
                       :loading="termLoading"
                       :setLabelId="contentProp"
                       :defaultExpandAll="true"
                       @handleNodeClick="handleCenterNodeClick"></container-nav>
      </el-col>
      <el-col :span="14" class="category-list">
        <div class="content-head">
          <section class="fun-btn">
            <el-button type="primary" size="small"
                       @click="handleAddEdit('add')"
                       icon="el-icon-circle-plus-outline">新增
            </el-button>
            <el-button type="danger" plain @click="handleDel" size="small">删除</el-button>

          </section>

          <div class="head-search">
            <search @onSubmit="onSearch">
              <el-form-item>
                <el-input placeholder="请输入内容"
                          clearable
                          v-model="searchData.val"
                          size="small"
                          class="input-with-select">
                  <el-select v-model="searchData.select"
                             clearable
                             slot="prepend"
                             placeholder="请选择">
                    <el-option label="描述" value="remark"></el-option>
                    <el-option label="期限" value="retentionType"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </search>
          </div>
        </div>

        <div class="list-box">

          <avue-crud :option="option"
                     :table-loading="tableLoading"
                     :data="tableData"
                     :page.sync="page"
                     ref="crud"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :before-close="handleBeforeClose"
                     @selection-change="handleSelectionChange"
                     @row-save="handleRowSave"
                     @row-update="handleRowUpdate">
          </avue-crud>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Search from '../../../../components/search/search'
// import AddEditSeePeriod from '../settingComponents/period/addEditSeePeriod'
import { addTermList, delTermList, editTermList, getTermList, getTermTree } from '../../../../api/storagePeriod'
import { getCategoryTree } from '../../../../api/category/category'
import ContainerNav from '../../../../components/containerNav/containerNav'
import { mapActions } from 'vuex'
import { getArchivesDicId } from '../../../../api/dictionary/dictionary'

export default {
  name: 'StoragePeriod',
  components: {
    ContainerNav,
    Search
  },
  // 保管期限表
  data () {
    return {
      treeLoading: true, // 左侧门类树
      termLoading: false, // 中间树
      idCategory: '',
      categoryTreeData: [], // 左侧门类树
      treeData: [], // 中间树
      leftCategoryProp: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      contentProp: {
        label: 'remark',
        value: 'id',
        children: 'children'
      },
      searchData: {
        val: '', // 筛选
        select: 'remark' // 筛选
      },
      dialogWidth: '600px',
      type: '',
      tableLoading: false,
      pid: '',
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: [],
      dicLIst: [], // 期限
      tableSelected: [] // 选中行
    }
  },
  mounted () {
    // 默认收起左侧导航栏
    this.setNavNarrow(true)
    this.getLeftCategory()
  },
  computed: {
    option () {
      return {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 193px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 180,
        column: [
          {
            label: '类别',
            prop: 'classifyName',
            span: 24,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请输入类别',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '期限',
            prop: 'retentionType',
            type: 'select',
            span: 24,
            overHidden: true,
            dicData: this.dicLIst,
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            },
            rules: [
              {
                required: true,
                message: '请选择期限',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '上级类别',
            prop: 'pid',
            type: 'tree',
            span: 24,
            overHidden: true,
            hide: true,
            disabled: (this.pid && this.type === 'add'),
            dicData: this.treeData,
            value: this.pid,
            props: {
              value: 'id',
              label: 'classifyName',
              children: 'children'
            }
          },
          {
            label: '排序',
            prop: 'orderNo',
            type: 'number',
            span: 24,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请输入排序号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '描述',
            prop: 'remark',
            type: 'textarea',
            width: 180,
            span: 24,
            overHidden: true,
            minRows: 4,
            maxRows: 6
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    getLeftCategory () {
      // 左侧获取门类
      getCategoryTree('sysModel', this.$route.query.isNotAjJnNode).then(res => {
        this.categoryTreeData = res.data.data
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
      getArchivesDicId('retention_type').then(res => {
        this.dicLIst = res.data.data
      })
    },
    handleLeftNodeClick (val) {
      // 左边门类选择查询
      if (val.idCategory) {
        this.idCategory = val.idCategory
        this.getTree()
        this.getList()
      }
    },
    handleCenterNodeClick (val) {
      // 中间树选择查询
      this.pid = val.pid
      this.getList()
    },
    getTree () {
      // 获取中间树
      this.termLoading = true
      getTermTree(this.idCategory, {}).then(res => {
        this.treeData = res.data.data
        this.termLoading = false
      }).catch(() => {
        this.termLoading = false
      })
    },
    async getList () {
      this.tableLoading = true
      const param = {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize
      }
      if (this.searchData.val) {
        param.params = [{
          name: this.searchData.select,
          op: 'like',
          value: this.searchData.val
        }]
      }

      await getTermList(this.idCategory, this.pid, param).then(res => {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
      })
      this.tableLoading = false
    },
    handleCurrentChange (currentPage) {
      // 翻页 第几页
      this.page.currentPage = currentPage
      this.getList()
    },
    handleSizeChange (pageSize) {
      // 翻页 一页多少条
      this.page.pageSize = pageSize
      this.getList()
    },
    handleSelectionChange (selection) {
      // 勾选表格行
      this.tableSelected = selection
    },
    handleRowSave (row, done, loading) {
      // 新增
      row.idCategory = this.idCategory
      addTermList(row).then(() => {
        this.$message.success('新增成功！')
        this.getList()
        done()
      }).catch(() => {
        done()
      })
    },
    handleRowUpdate (row, index, done) {
      // 修改
      row.idCategory = this.idCategory
      editTermList(row).then(() => {
        this.$message.success('修改成功！')
        this.getList()
        done()
      }).catch(() => {
        done()
      })
    },
    onSearch () {
      // 搜索
      if (!this.idCategory) {
        this.$message.warning('请选择门类！')
        return
      }
      this.getList()
    },
    handleAddEdit (type) {
      this.type = 'add'
      if (type === 'add' && !this.idCategory) {
        this.$message.warning('请选择门类！')
        return
      }
      this.$refs.crud.rowAdd()
    },
    handleBeforeClose (done, type) {
      this.type = ''
      done()
    },
    handleDel () {
      // 删除
      if (this.tableSelected.length > 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map(item => {
            ids.push(item.id)
          })
          delTermList(ids).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.warning('请至少选中一条数据进行删除操作！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .box {
    margin: 0 -10px;

    .content-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      padding-right: 10px;

      .head-search {
        .input-with-select {
          width: 320px
        }
      }
    }

    .category-tree {
      width: 232px;
    }

    .center-tree {
      width: 332px;
    }

    .category-list {
      width: calc(100% - 564px);

      ::v-deep .avue-crud__pagination {
        padding: 0 0px 15px 0 !important;
      }
    }
  }
</style>
